<template>
	<div>
		<!--<header class="aui-header">
			<a class="aui-pull-left aui-btn">
				<img src="../assets/rightbut.png">
			</a>
			<div class="aui-title">{{headlist.userNickName}}的店铺</div>
		</header>-->
		<!--<div class="myshopCon" :style="{backgroundImage:'url('+ backImg +')'}">-->
		<div class="myshopCon">
			<div class="shopersonal">
				<div class="peronalcon">
					<div class="userimg"><img :src="headlist.userHeadImg"></div>
					<span class="username">{{headlist.userNickName}}</span>
				</div>
			</div>
		</div>
		<!--<div class="samebanner"><img src="../assets/Shopowner.jpg"></div>
		<div class="goodsrecomend">
			<ul :style="{width:newWidth+'px'}">
				<li class="samerecgoods" v-for="item in gromlist.list">
					<div v-if="item.spuPlatform == 'yh'" @click="yhDetail(item.id)">
						<div class="recgoodsimg">
							<img :src="item.mainImageUrl">
							<i class="jdSymbol" v-if="item.spuPlatform == 'jd'"></i>
							<i class="yhSymbol" v-if="item.spuPlatform == 'yh'"></i>
						</div>
						<div class="recgoodsname">{{item.goodsName}}</div>
						<div class="recgoodprice">
							<span class="orginprice">￥{{item.price}}</span>
							<span class="activeprice">到手价:￥{{item.conPrice}}</span>
						</div>
						<div class="recgoodcoup">
							<div class="redcoupon">{{item.couponMoney}}元券</div>
							<span class="rectotalsum">已抢{{item.totalSales}}/评价</span>
						</div>
					</div>
					<div v-else-if="item.spuPlatform == 'jd'" @click="jdDetail(item.id,item.couponMoney)">
						<div class="recgoodsimg">
							<img :src="item.mainImageUrl">
							<i class="jdSymbol" v-if="item.spuPlatform == 'jd'"></i>
							<i class="yhSymbol" v-if="item.spuPlatform == 'yh'"></i>
						</div>
						<div class="recgoodsname">{{item.goodsName}}</div>
						<div class="recgoodprice">
							<span class="orginprice">￥{{item.price}}</span>
							<span class="activeprice">到手价:￥{{item.conPrice}}</span>
						</div>
						<div class="recgoodcoup">
							<div class="redcoupon">{{item.couponMoney}}元券</div>
							<span class="rectotalsum">已抢{{item.totalSales}}/评价</span>
						</div>
					</div>
				</li>
			</ul>
		</div>-->
		<!--<div class="samebanner"><img src="../assets/fireback.jpg"></div>-->
		<!--<div class="singproduCon">
			<ul v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">

				<li class="sameproli" v-for="item in singlist">
					<div v-if="item.spuPlatform == 'yh'" @click="yhDetail(item.id)">
						<div class="singproimg">
							<img :src="item.mainImageUrl">
							<i class="yhSymbol" v-if="item.spuPlatform == 'yh'"></i>
							<i class="jdSymbol" v-if="item.spuPlatform == 'jd'"></i>
						</div>
						<div class="singproname">{{item.goodsName}}</div>
						<div class="singprice">
							<span class="singOrginprice">￥{{item.price}}</span>
							<span class="signActiveprice">到手价:￥<font style="font-size: 0.32rem;">{{item.conPrice}}</font></span>
						</div>
						<div class="singcoup">
							<div class="redpacketsing">{{item.couponMoney}}元券</div>
							<span class="singtotalsum">已抢{{item.totalSales}}件/评价</span>
						</div>
					</div>
					<div v-else-if="item.spuPlatform == 'jd'" @click="jdDetail(item.id,item.couponMoney)">
						<div class="singproimg">
							<img :src="item.mainImageUrl">
							<i class="yhSymbol" v-if="item.spuPlatform == 'yh'"></i>
							<i class="jdSymbol" v-if="item.spuPlatform == 'jd'"></i>
						</div>
						<div class="singproname">{{item.goodsName}}</div>
						<div class="singprice">
							<span class="singOrginprice">￥{{item.price}}</span>
							<span class="signActiveprice">到手价:￥<font style="font-size: 0.32rem;">{{item.conPrice}}</font></span>
						</div>
						<div class="singcoup">
							<div class="redpacketsing">{{item.couponMoney}}元券</div>
							<span class="singtotalsum">已抢{{item.totalSales}}件/评价</span>
						</div>
					</div>
				</li>

			</ul>
		</div>-->
		
		<div class="content">
			
			
			<ul v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
				
				<li v-for='item in shang' v-if="item.spuPlatform == 'yh'" @click="yhDetail(item.id)">
					
					<div class="content_d">
						<div class="c-img">
							<img :src="item.mainImageUrl">
							<i class="yhSymbol" v-if="item.spuPlatform == 'yh'"></i>
							<i class="jdSymbol" v-if="item.spuPlatform == 'jd'"></i>
						</div>
						
						<div class="content_d_u">
							<div class="na">{{item.goodsName}}</div>
							<img src="../assets/jingxaun.png" class="jing">
							
							<div class="ji">
								<div>
									<span>￥{{item.price}}</span>
									<span>/</span>
									<span>降{{item.couponMoney}}元</span>
								</div>
								<div>已抢{{item.wlCommissionShare}}件</div>
							</div>
							
							<div class="jie">
								<div>￥{{item.conPrice}}</div>
								<div>立即抢购</div> 
							</div>
							
							
						</div>
						
					</div>
					
				</li>
				
				
				<li v-for='item in shang' v-if="item.spuPlatform == 'jd'" @click="jdDetail(item.id,item.couponMoney)">
					
					<div class="content_d" >
						<div class="c-img">
							<img :src="item.mainImageUrl">
							<i class="yhSymbol" v-if="item.spuPlatform == 'yh'"></i>
							<i class="jdSymbol" v-if="item.spuPlatform == 'jd'"></i>
						</div>
						
						<div class="content_d_u">
							<div class="na">{{item.goodsName}}</div>
							<img src="../assets/jingxaun.png" class="jing">
							
							<div class="ji">
								<div>
									<span>￥{{item.price}}</span>
									<span>/</span>
									<span>降{{item.couponMoney}}元</span>
								</div>
								<div>已抢{{item.wlCommissionShare}}件</div>
							</div>
							
							<div class="jie">
								<div>￥{{item.conPrice}}</div>
								<div>立即抢购</div> 
							</div>
							
							
						</div>
						
					</div>
					
				</li>
				
			</ul>	
			
		</div>
		
		<div class="foo" @click="experience">
			<div class="fimg">
				<img src="../assets/huipic.png">
			</div>
			<div class="fo_u">
				<span>友惠家</span>
				<span>通过友惠家去淘宝京东购买商品消费
金额自动存入友惠家，每天赚收益。</span>
			</div>
			<div class="experience">
				立即体验
			</div>
		</div>
		
		
		
	</div>
</template>

<script>
	import { InfiniteScroll } from 'mint-ui';
	import { BaseUrl } from '../Baseurl/common.js';
	import { gzhUrl } from '../Baseurl/common.js';
	import { Toast } from 'mint-ui';
	export default {
		data() {
			return {
				headlist: [],
				gromlist: [],
				singlist: [],
				singjson: [],
				index: 0,
				loading: false,
				newWidth: '',
				yunId: '',
				token: '',
				shang:[]
			}
		},
		created() {
			this.yunId = this.$route.query.yunId;
			localStorage.setItem('yunId', this.yunId);
			//获取店主信息
			var headurl = BaseUrl + 'users/getUserInfo?userId=' + this.yunId;
			this.$http.get(headurl).then(res => {
						
						if(res.data.code == "10000") {
							this.headlist = res.data.data;
//							this.backImg = res.data.userHeadImg;
						}
					})
			
			this.token = localStorage.getItem('token');
			if(this.token){
				var groomurl = BaseUrl + 'users/recomGoods?token=' + this.token + '&appId=gzh';
					this.$http.get(groomurl).then(res => {
						if(res.data.code == "10000") {
							this.gromlist = res.data.data;
							this.newWidth = 165 * parseInt(this.gromlist.total);
						}
					})
			}else{
				this.token = this.$route.query.token;
				if(this.token){
					localStorage.setItem('token',this.token);
					var groomurl = BaseUrl + 'users/recomGoods?token=' + this.token + '&appId=gzh';
					this.$http.get(groomurl).then(res => {
						if(res.data.code == "10000") {
							this.gromlist = res.data.data;
							this.newWidth = 165 * parseInt(this.gromlist.total);
						}
					})
				}
			}


//			var loginUrl = BaseUrl + 'login/in?yunId=' + this.yunId+'&appId=gzh';
//			this.$http.get(loginUrl).then(res => {
//				if(res.data.code == "10000") {
//					this.token = res.data.data.token;
//					this.singInfo(this.index,this.token);
//					localStorage.setItem('token', this.token);
//					/*//店铺头部信息
//					var headurl = BaseUrl + 'users/yunindex?token=' + this.token + '&appId=gzh';
//					this.$http.get(headurl).then(res => {
//						if(res.data.code == "10000") {
//							this.headlist = res.data.data;
//							this.backImg = this.headlist.userImg;
//						}
//
//					})*/
//					/*//推荐商品
//					var groomurl = BaseUrl + 'users/recomGoods?token=' + this.token + '&appId=gzh';
//					this.$http.get(groomurl).then(res => {
//						if(res.data.code == "10000") {
//							this.gromlist = res.data.data;
//							this.newWidth = 165 * parseInt(this.gromlist.total);
//							//console.log(this.newWidth)
//							//+(parseInt(this.gromlist.total)-3)*10
//						}
//
//					})*/
//					
//					
////					商品
//					
//
//				}

//			})
			

		},

		methods: {
//			singInfo(index) {
//
//				//单品
//				var singurl = BaseUrl + 'users/hostGoods?token=' + this.token + '&appId=gzh';
//				this.$http.get(singurl + "&length=10&start=" + this.index).then(res => {
//					if(res.data.code == "10000") {
//						console.log(res.data.data);
//						this.singjson = res.data.data;
//						this.singlist = this.singlist.concat(res.data.data.list);
//					} else {
//						
//					}
//					if(res.data.data.isMore == "none") {
//						this.loading = true;
//						return;
//					} else if(res.data.data.isMore == "have") {
//						this.loading = false;
//						this.index++;
//					}
//					//console.log(this.singlist, this.index)
//				})
//			},
			singInfo(index){
				var url = BaseUrl + '/goods/list?length=10&start='+this.index;
					this.$http.get(url).then(res =>{
						if(res.data.code == '10000'){
							this.shang = this.shang.concat(res.data.data.list)
//							console.log(this.shang)
						}
						if(res.data.data.isMore == "none") {
							this.loading = true;
							return;
						} else if(res.data.data.isMore == "have") {
							this.loading = false;
							this.index++;
						}
					})
			},
			loadMore() {

				this.loading = true;
				//alert(this.index);

				setTimeout(() => {
					this.singInfo(this.index,this.token);
					this.loading = false;
				}, 3000);

			},
			jdDetail: function(obj, id) {
			    //判断有没有登入
				if(this.token){
				    var jdUrl;
					if(id == 0) {
						jdUrl = BaseUrl + 'jd/getUrl?spuId=' + obj + '&token=' + this.token + '&appId=gzh';
					} else {
						jdUrl = BaseUrl + 'jd/getConUrl?spuId=' + obj + '&token=' + this.token + '&appId=gzh';
					}

					this.$http.get(jdUrl).then(res => {
	//					console.log(res.data)
						
						if(res.data.code == "10000") {
							window.location.href = res.data.data
						} else {
							Toast({
								message: res.data.msg,
								position: 'middle',
								duration: 3000
							});
						}

					})
				}else{
				     var setBackUrl = BaseUrl + 'project/setBackUrl?backUrl=' + escape(location.href) ;
				     this.$http.get(setBackUrl).then(res => {
						if(res.data.code == "10000") {
							window.location.href = gzhUrl+'Uc/author?backUrl='+res.data.data;
						}else{
						    Toast({
								message: res.data.msg,
								position: 'middle',
								duration: 3000
						    });
						}
					})
				}
				
			},
			yhDetail: function(obj) {
				this.$router.push({
					path: '../redpackage?goodsId=' + obj
				})
			},
			experience: function() {
				this.$router.push({
					path: '../Yuninvitenter?parentId=' + this.yunId  +"&name=" + this.headlist.userNickName
				})
			}

		},
		

	}
</script>
<style scoped="scoped">
	.myshopCon {
		/*margin-top: 1rem;*/
		/*background: url(http://file.jhjvip.cn/images/default.jpg);*/
		background: url(../assets/dianpu/dian.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}
	
	.shopersonal {
		width: 100%;
		height: 3rem;
	}
	
	.peronalcon {
		width:100%;
		text-align: center;
		padding-top: 0.6rem;
	}
	
	.userimg {
		width: 0.98rem;
		height: 0.98rem;
		margin: 0 auto;
	}
	
	.userimg>img {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}
	
	.username {
		line-height: 1rem;
		color: #FFFFFF;
		font-size: 0.36rem;
	}
	
	.content{
		width: 100%;
		background: #F0F2F5;
	}
	.content ul{
	width: 100%;
	overflow: hidden;
}
	.content_d{
		width: 100%;
		height: 2.6rem;
		background: #ffffff;
		margin-top: 0.1rem;
		display: flex;
		justify-content: space-between;
	}
	.c-img{
		width: 2.6rem;
		height: 2.6rem;
	}
	.c-img img{
		width: 100%;
		height: 100%;
	}
	.jdSymbol {
		width: 0.67rem;
		height: 0.67rem;
		background: url(../assets/jd.png);
		background-size: 100% 100%;
		display: block;
		position: relative;
		margin-top: -0.77rem;
		float: right;
	}
	
	.yhSymbol {
		width: 0.67rem;
		height: 0.67rem;
		background: url(../assets/yh.png);
		background-size: 100% 100%;
		display: block;
		position: relative;
		margin-top: -0.77rem;
		float: right;
	}
	
	.content_d_u{
		width: 4.9rem;
		padding:0.14rem  ;
		box-sizing: border-box;
		position: relative;
	}
	.na{
		height: 18px;overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
	    text-indent: 0.9rem;
	    color: #000000;
	    font-size: 0.26rem;
	}
	.jing{
		width: 0.7rem;
		height: 0.33rem;
		position: absolute;
		top:0.2rem;
		left: 0.2rem;
	}
	.ji{
		display: flex;
		justify-content: space-between;
		margin-top: 0.39rem;
		font-size: 0.24rem;
		padding-bottom: 0.2rem;
		border-bottom: 1px dotted  #CBCBCB;
	}
	.ji span:nth-child(1){
		color: #ABABAB; 
		text-decoration: line-through;
	}
	.ji span:nth-child(2){
		color: #ABABAB; 
		margin: 0 0.05rem;
	}
	.ji span:nth-child(3){
		color: #FF2040;
	}
	.ji div:nth-child(2){
		color: #ABABAB;
	}
	
	.jie{
		display: flex;
		justify-content:space-between;
		align-items: center;
		margin-top: 0.31rem;
	}
	.jie div:nth-child(1){
		color: #FF2040;
		font-size: 0.36rem;
		font-weight: bold;
	}
	.jie div:nth-child(2){
		width: 1.53rem;
		text-align: center;
		background: #FF2040;
		border-radius: 0.5rem;
		color: #FFFFFF;
		padding:  0.05rem 0;
	}
	
	.foo{
		width: 100%;
		/*height: 1.28rem;*/
		padding: 0.15rem  0.26rem;
		background: #FFFFFF;
		position: fixed;
		left: 0;
		bottom:0;
		z-index: 999;
		display: flex;
		border-top: 1px solid #f0f0f0;
	}
	.fimg{
		width: 1rem;
		height: 1rem;
		margin-right: 0.22rem;
	}
	.fimg img{
		width: 100%;
		height: 100%;
	}
	.fo_u{
		width: 3.84rem;
	}
	.fo_u span{
		display: block;
		font-size: 0.24rem;
	}
	.fo_u span:nth-child(1){
		color: #333333 ;
		font-weight: bold;
	}
	.fo_u span:nth-child(2){
		color: #999999  ;
	}
	.experience{
		width: 1.5rem;
		height: 0.48rem;
		text-align: center;
		line-height: 0.48rem;
		border-radius: 0.5rem;
		background: #FF2040;
		font-size: 0.24rem;
		color: #ffffff;
		margin-top: 0.5rem;
		margin-left: 0.3rem;
	}
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	/**广告***/
	
	.samebanner {
		width: 100%;
		height: 0.8rem;
	}
	
	.samebanner>img {
		width: 100%;
		height: 100%;
	}
	/**推荐商品**/
	
	.goodsrecomend {
		width: 100%;
		overflow-x: scroll;
		overflow-y: hidden;
		box-sizing: border-box;
	}
	
	.goodsrecomend>ul {
		font-size: 0;
		height: 100%;
		width: 1000px;
	}
	
	.samerecgoods {
		width: 3.2rem;
		display: inline-block;
		background: #FFFFFF;
		margin-left: 0.1rem;
		position: relative;
	}
	
	.samerecgoods:nth-child(1) {
		margin-left: 0rem;
	}
	
	::-webkit-scrollbar {
		/*隐藏滚轮*/
		display: none;
	}
	
	.recgoodsimg {
		width: 2.98rem;
		height: 2.98rem;
		background: blue;
		margin: 0 auto;
		margin-top: 0.1rem;
	}
	
	.recgoodsimg>img {
		width: 100%;
		height: 100%;
		display: block;
	}
	
	/*.jdSymbol {
		width: 0.67rem;
		height: 0.67rem;
		background: url(../assets/jd.png);
		background-size: 100% 100%;
		display: block;
		position: relative;
		margin-top: -0.65rem;
		float: right;
	}
	
	.yhSymbol {
		width: 0.67rem;
		height: 0.67rem;
		background: url(../assets/yh.png);
		background-size: 100% 100%;
		display: block;
		position: relative;
		margin-top: -0.65rem;
		float: right;
	}*/
	
	.recgoodsname {
		font-size: 0.28rem;
		margin: 0 0.1rem;
		margin-top: 0.1rem;
		height: 0.6rem;
		overflow: hidden;
		line-height: 0.3rem;
		display: -webkit-inline-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		color: #323232;
	}
	
	.recgoodprice {
		margin: 0 0.1rem;
		display: block;
	}
	
	.orginprice {
		font-size: 0.24rem;
		color: #989898;
	}
	
	.activeprice {
		float: right;
		font-size: 0.24rem;
		color: #FF2040;
	}
	/**优惠券**/
	
	.recgoodcoup {
		margin: 0 0.25rem;
		margin-bottom: 0.2rem;
		margin-top: 0.15rem;
	}
	
	.redcoupon {
		width: 1.08rem;
		height: 0.28rem;
		background: url(../assets/coupn.png);
		background-size: 100%;
		text-align: center;
		line-height: 0.28rem;
		font-size: 0.23rem;
		color: #FFFFFF;
		display: inline-block;
	}
	
	.rectotalsum {
		float: right;
		color: #989898;
		font-size: 0.24rem;
	}
	/****单品****/
	
	.singproduCon {
		width: 100%;
	}
	
	.singproduCon>ul {
		font-size: 0;
	}
	
	.sameproli {
		width: 49.3%;
		background: #FFFFFF;
		margin-top: 0.2rem;
		display: inline-block;
		padding: 0.10rem;
	}
	
	.sameproli:nth-child(1) {
		margin-top: 0rem;
	}
	
	.sameproli:nth-child(2) {
		margin-top: 0rem;
	}
	
	.sameproli:nth-child(even) {
		margin-left: 0.1rem;
	}
	
	.singproimg {
		width: 3.51rem;
		height: 3.51rem;
	}
	
	.singproimg>img {
		width: 100%;
		height: 100%;
	}
	
	.singproname {
		width: 100%;
		color: #323232;
		height: 0.7rem;
		line-height: 0.35rem;
		font-size: 0.28rem;
		display: -webkit-inline-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
	
	.singprice {
		font-size: 0;
	}
	
	.singOrginprice {
		display: inline-block;
		font-size: 0.28rem;
		color: #989898;
		line-height: 0.55rem;
	}
	
	.signActiveprice {
		display: inline-block;
		float: right;
		font-size: 0.25rem;
		color: #FF2040;
	}
	
	.singcoup {
		width: 100%;
		font-size: 0;
	}
	
	.redpacketsing {
		width: 1.08rem;
		height: 0.28rem;
		background: url(../assets/coupn.png);
		background-size: 100% 100%;
		color: #FFFFFF;
		text-align: center;
		line-height: 0.28rem;
		font-size: 0.23rem;
		display: inline-block;
		margin-top: 0.05rem;
	}
	
	.singtotalsum {
		float: right;
		font-size: 0.28rem;
		color: #989898;
	}
</style>